<template>
  <div>
    <div class="mb-20">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-menu"></i> 收藏</el-breadcrumb-item>
        <el-breadcrumb-item>用户收藏</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户ID/账号名/昵称">
        <el-input v-model="formInline.name" placeholder="用户ID/账号名/昵称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch('form')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="用户ID"  width="120"></el-table-column>
      <el-table-column prop="name" label="账号" width="200"></el-table-column>
      <el-table-column prop="nickname" label="昵称" width="200"></el-table-column>
      <el-table-column prop="create_time" label="注册日期" width="150"></el-table-column>
      <el-table-column prop="status_text" label="状态" width="120"></el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button size="small" @click="see(scope.$index, scope.row)">查看用户收藏列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change ="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        formInline: {
          keywords: ''
        }
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.user.list,
        textData: state => state.user.pageData
      })
    },
    created () {
      this.userList()
    },
    methods: {
      async userList () {
        let payload = {
          page: this.textData.current_page,
          list_rows: this.textData.per_page,
          keywords: this.$route.query.name
        }
        this.$store.dispatch('user/getList', payload)
      },
      onSearch (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({path: '/favorite/list', query: {name: this.formInline.name}})
            this.userList()
          }
        })
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.userList()
      },
      see (index, row) {
        this.$router.push({name: 'UserFavorite', params: {id: row.id}})
      },
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
